import React from 'react';
import { connect } from 'react-redux';
import Tabs, { TabPane } from 'rc-tabs';
import TabContent from 'rc-tabs/lib/TabContent';
import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';

import i18n from 'vj/utils/i18n';
import request from 'vj/utils/request';
import Icon from 'vj/components/react/IconComponent';
import Panel from './PanelComponent';
import PanelButton from './PanelButtonComponent';
import ScratchpadRecordsTable from './ScratchpadRecordsTableContainer';

const mapDispatchToProps = dispatch => ({
  loadSubmissions() {
    dispatch({
      type: 'SCRATCHPAD_RECORDS_LOAD_SUBMISSIONS',
      payload: request.get(Context.getSubmissionsUrl),
    });
  },
  handleClickClose() {
    dispatch({
      type: 'SCRATCHPAD_UI_SET_VISIBILITY',
      payload: {
        uiElement: 'records',
        visibility: false,
      },
    });
  },
  handleClickRefresh() {
    this.loadSubmissions();
  },
});

@connect(null, mapDispatchToProps)
export default class ScratchpadRecordsContainer extends React.PureComponent {
  componentDidMount() {
    this.props.loadSubmissions();
  }
  render() {
    return (
      <Panel
        title={<span><Icon name="flag" /> {i18n('Records')}</span>}
      >
        <Tabs
          className="scratchpad__panel-tab flex-col flex-fill"
          activeKey={'all'}
          animation="slide-horizontal"
          renderTabBar={() => (<ScrollableInkTabBar
            extraContent={
              <span>
                <PanelButton
                  data-tooltip={i18n('Refresh Records')}
                  data-tooltip-pos="top right"
                  onClick={() => this.props.handleClickRefresh()}
                >
                  {i18n('Refresh')}
                </PanelButton>
                <PanelButton
                  onClick={() => this.props.handleClickClose()}
                >
                  <Icon name="close" />
                </PanelButton>
              </span>
            }
          />)}
          renderTabContent={() => <TabContent />}
        >
          <TabPane tab={<span>{i18n('All')}</span>} key="all">
            <ScratchpadRecordsTable />
          </TabPane>
        </Tabs>
      </Panel>
    );
  }
}
